import * as echarts from 'echarts'
import { ref, onMounted, onUnmounted } from 'vue'
import { vegetableinfoGetService } from '../api/admin/vegetableplot'
export function plantingTimeECharts(targetId, theme = 'back') {
  const chartInstance = ref(null)
  const vagetableview = ref([])

  onMounted(async () => {
    const chart = echarts.init(document.getElementById(targetId), theme)
    const res = await vegetableinfoGetService() // 注意这里使用了 async/await
    vagetableview.value = res.data.data
    const seriesData = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
    for (let i = 0; i < vagetableview.value.length; i++) {
      switch (vagetableview.value[i].starttime.split('-')[1]) {
        case '01':
          seriesData[0]++
          break
        case '02':
          seriesData[1]++
          break
        case '03':
          seriesData[2]++
          break
        case '04':
          seriesData[3]++
          break
        case '05':
          seriesData[4]++
          break
        case '06':
          seriesData[5]++
          break
        case '07':
          seriesData[6]++
          break
        case '08':
          seriesData[7]++
          break
        case '09':
          seriesData[8]++
          break
        case '10':
          seriesData[9]++
          break
        case '11':
          seriesData[10]++
          break
        case '12':
          seriesData[11]++
          break
      }
    }

    // 获取当前时间的年份
    var currentDate = new Date()
    var year = currentDate.getFullYear()

    // 创建 x 轴的数据数组
    var xAxisData = []
    for (var i = 1; i <= 12; i++) {
      xAxisData.push(year + '-' + (i < 10 ? '0' + i : i)) // 月份补零
    }

    initChart(chart, xAxisData, seriesData)
    chart.resize()
    chartInstance.value = chart
  })
  onUnmounted(() => {
    if (chartInstance.value) {
      chartInstance.value.dispose()
    }
  })

  return { chartInstance }
}
function initChart(chart, xAxisData, seriesData) {
  chart.setOption({
    title: {
      text: '今年种植次数',
      left: 'center'
    },
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      data: xAxisData
    },
    yAxis: {
      type: 'value',
      interval: 1 // 设置 y 轴的步长为 1
    },
    series: [
      {
        data: seriesData,
        type: 'line',
        animation: true // 启用动画效果
      }
    ]
    // visualMap: {
    //   show: false, // 不显示 visualMap 组件
    //   min: Math.min.apply(null, seriesData), // 数据最小值
    //   max: Math.max.apply(null, seriesData), // 数据最大值
    //   dimension: 0, // visualMap 映射的维度，这里是第一个维度
    //   inRange: {
    //     color: ['blue', 'red'] // 定义颜色范围，蓝色到红色
    //   },
    //   outOfRange: {
    //     opacity: 0.1 // 超出范围的线条透明度
    //   }
    // }
  })
}
